$box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
$board-bgColor: white;
$plus-color: green;
$minus-color: red;

* {
  box-sizing: border-box;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  background-color: #f7f7f7;
}
h1,
h3,
h4 {
  margin: 0;
}

.container {
  // 整个容器的宽度
  width: 350px;
  margin-bottom: 50px;
  .title {
    padding-bottom: 10px;
    border-bottom: 1px solid #bbb;
  }

  .balance-container {
    margin: 20px 0;
    .total {
      margin-top: 5px;
      letter-spacing: 1px;
    }

    .details-container {
      padding: 20px;
      background-color: $board-bgColor;
      box-shadow: $box-shadow;
      display: flex;
      justify-content: space-between;

      div {
        flex: 1;
        text-align: center;
        &:first-of-type {
          border-right: 1px solid black;
        }

        .money {
          margin: 5px 0;
          font-size: 20px;
          letter-spacing: 1px;

          &.plus {
            color: $plus-color;
          }

          &.minus {
            color: $minus-color;
          }
        }
      }
    }
  }

  .history-container {
    margin: 20px 0;
    .list{
        list-style: none;
        padding: 0;
        li{
            margin: 10px 0;
            padding: 10px;
            background-color: $board-bgColor;
            box-shadow: $box-shadow;
            // 布局
            display: flex;
            justify-content: space-between;
            // 为了让button脱离文档流
            position: relative;



            &.plus{
                border-right: 5px solid $plus-color;
            }

            &.minus{
                border-right: 5px solid $minus-color;
            }

            .delete-btn{
                position: absolute;
                top: 50%;
                left: 0;
                transform: translate(-100%,-50%);

                font-size: 20px;
                line-height: 20px;
                background-color: red;
                color: white;
                border: none;
                cursor: pointer;

                // 控制隐藏和现实
                opacity: 0;
                transition: opacity 0.25 ease;
            }

            &:hover{
                .delete-btn{
                    opacity: 1;
                }  
            }
        }
    }
  }

  .transaction-container{
    label{
        display: block;
        margin: 10px 0;

        .describe{
            color: rgb(112, 111, 111);
            font-size: small;
        }
    }

    input{
        width: 100%;
        margin: 10px 0;
        padding: 10px;
        font-size: 16px;
        border: 1px solid rgb(144, 143, 143);
    }

    .add-btn{
        padding: 10px;
        width: 100%;
        font-size: 16px;
        border: none;
        cursor: pointer;
        color: white;
        background-color: rgb(155, 47, 213);
        box-shadow: $box-shadow;
    }
  }
}
